<template>
 <div @click="changeNight">
        <transition-group>
          <i class="el-icon-sunny fixedIcon fontColor" key="1" v-show="!nightMode">白天模式</i>
          <i class="el-icon-moon fixedIcon fontColor" key="2" v-show="nightMode">夜间模式</i>
        </transition-group>
      </div>
</template>

<script>
export default {
  name: "dark-mode",
  mounted() {
    let hours = new Date().getHours();
    if (hours > 17 || hours < 7) {
      this.nightMode = true
      this.changeClass()
    }
  },
  data() {
    return {
      nightMode: false,
    }
  },
  methods: {
    changeNight() {
      this.nightMode = !this.nightMode
      this.changeClass()
    },
    changeClass() {
      if (this.nightMode) {
        document.body.classList.add('night-color')
      } else {
        document.body.classList.remove('night-color')
      }
    }
  }
}
</script>

<style scoped>
.fixedIcon {
  position: fixed;
  top: 14px;
  right: 140px;
  font-size: 15px;
  cursor: pointer;
}
</style>
